import {useEffect,useState} from 'react'
import { Row, Col, Input,Empty  } from 'antd';
import { AliwangwangOutlined } from '@ant-design/icons'
import BlogItem from '../../Blog/BlogItem'
import Achievement from './Achievement'
import Areaside from './Areaside'
import Tags from './Tag'
import store from '../../../redux/store'
import fnc from '@/assets/js/fnc.js'
import './index.less'
const { Search } = Input;
export default function InnerContainer(props) {
  const [tag,setTag] = useState([])
  const [area,setArea] = useState([])
  const [userData,setUser] = useState({})

  const blogList = props.userBlog
  console.log(blogList)
  useEffect(()=>{
      let msg = store.getState()
      setTag(msg.user.tag?msg.user.tag:[])
      setArea(msg.user.area?msg.user.area:[])
      setUser(msg.user.user?msg.user.user:{})
    
  },[])

  return (
    <div className="InnerContainer">
      {/* <h2>zhiongxuin</h2> */}
      <Row gutter={16}>
        <Col className="gutter-row navlink" span={18}>
          <div className="gutter-box flex-between cardBox navlink">
            <ul className="flex-center">
              <li>最近</li>
              <li>文章·90</li>
              <li>点赞·90</li>
              <li>收藏·90</li>
              <li>关注·90</li>
            </ul>
            <div className="search">
              <Search
                placeholder="input search text"
                onSearch={value => console.log(value)}
                style={{ width: 200 }}
              />
            </div>
          </div>
        </Col>
        <Col className="gutter-row" span={6}>
          <div className="gutter-box addInfo align-center cardBox">
            <AliwangwangOutlined style={{ fontSize: '20px', marginRight: '10px' }} />
            <span>于</span>
            <span>{fnc.getTimeFormat(userData.createtime,'ymd')}</span>
            <span>加入JimmyBlog</span>
          </div>
        </Col>
      </Row>
      <Row gutter={16}>
      
        <Col className="gutter-row article-item" span={18}>
        {/* <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> */}
          {blogList.length!==0?blogList.map(blog=>{
            return <BlogItem key={blog.blogid} blog={blog} />
          }):<div className="cardBox emptyStatus"><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /></div>
          }
        </Col>
        <Col className="gutter-row" span={6}>
          <Achievement />
          <Areaside area={area} />
          <Tags tag={tag} />
        </Col>
      </Row>
    </div>
  )
}